<template>
  <div class="API">
    <div class="extend" id="extend">Vue.extend()</div>
  </div>
</template>

<script>
// import Vue from "vue/dist/vue.js";
// var Profile = Vue.extend({
//   template: "<div>{{firstName}} {{lastName}} aka {{alias}}</div>",
//   data() {
//     return {
//       firstName: "小",
//       lastName: "啊Giao",
//       alias: "哈哈嗨",
//     };
//   },
// });

// let profile = new Profile().$mount();
// export default {
//   mounted() {
//     let el = document.querySelector("#api");
//     el.appendChild(profile.$el);
//   },
// };

import createExtend from "@/utils/extend.js";

export default {
  data() {
    return {
      templateOptions: {
        who: "小啊Giao",
        doing: "哈哈嗨",
      },
    };
  },
  mounted() {
    this.handleExtend();
  },
  methods: {
    handleExtend() {
      let template = "<div>{{who}} 在 {{doing}}</div>";
      let profile = createExtend(template, this.templateOptions);
      document.querySelector("#extend").appendChild(profile.$el);
    },
  },
};
</script>

<style lang="less" scoped>
.API {
  width: 1200px;
  padding-top: 20px;
  margin: 0 auto;
}
</style>
